<%@ page contentType="text/html;charset=UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta name="google-site-verification" content="LgblCrocw4d4ccdOkob0kzt3Ing7mMy1dKTtLoUb-2s" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="keywords" content="how crop images, how zoom images, crop image,CropZooom, rotate image, zoom image, jquery plugin, crop plugin, zoom plugin, rotation, croppping, zooming" />
	<meta name="description" content="CropZoom is a plugin that let you select, rotate and zoom an image to make a crop. This is free and ready to use." />  
    <title>CropZoom another Jquery Plugin</title>
	<% String baseUrl = request.getContextPath(); %>
   
    <script type="text/javascript" src="<%=baseUrl %>/static/crop/cropzoom/1.2/demo/js/script.js"></script>
    <link href="<%=baseUrl %>/static/crop/cropzoom/1.2/demo/css/jquery-ui-1.10.3.custom.min.css" rel="Stylesheet" type="text/css" /> 
    <link href="<%=baseUrl %>/static/crop/cropzoom/1.2/demo/css/jquery.cropzoom.css" rel="Stylesheet" type="text/css" /> 
    <script type="text/javascript" src="<%=baseUrl %>/static/crop/cropzoom/1.2/demo/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="<%=baseUrl %>/static/crop/cropzoom/1.2/demo/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript" src="<%=baseUrl %>/static/crop/cropzoom/1.2/demo/js/jquery.cropzoom.js"></script>
    <link rel="stylesheet" href="<%=baseUrl %>/static/crop/cropzoom/1.2/demo/css/style.css" type="text/css" media="screen" />
    <style type="text/css">
        #zoom,#rot{
            width:360px;
            margin:auto;
            height:25px;
        }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
       var cropzoom = $('#crop_container').cropzoom({
            width:400,
            height:300,
            bgColor: '#CCC',
            enableRotation:true,
            enableZoom:true,
            zoomSteps:10,
            rotationSteps:10,
            selector:{        
              centered:true,
              startWithOverlay: true,
              borderColor:'blue',
              borderColorHover:'red'
            },
            image:{
                source:'<%=baseUrl %>/static/crop/cropzoom/1.2/demo/chicas1024.jpg',
                width:1024,
                height:768,
                minZoom:10,
                maxZoom:150
            }
        });
        cropzoom.setSelector(45,45,200,150,true);
        $('#crop').click(function(){ 
            cropzoom.send('resize_and_crop_imagick.php','POST',{},function(rta){
                $('.result').find('img').remove();
                var img = $('<img />').attr('src',rta);
                $('.result').find('.txt').hide().end().append(img);
            });
        });
        $('#restore').click(function(){
            $('.result').find('img').remove();
            $('.result').find('.txt').show()
            cropzoom.restore();
        })
    })
</script>
<style type="text/css">
	#img_to_crop{
		-webkit-user-drag: element;
		-webkit-user-select: none;
	}
</style>
</head>
<body>

<div class="PostMetadataHeader">
    <h2 class="PostHeader">
        Example
    </h2>
</div>
<div class="PostContent">
      <div class="boxes">
          <div id="crop_container"></div>
          <div class="result">
            <div class="txt">Here you will see the cropped image</div>
          </div> 
          <div class="cleared"></div> 
      </div>  
      <br />
      <span class="button-wrapper" id="crop">
            <span class="l"> </span>
            <span class="r"> </span>
            <a class="button" href="javascript:void(0)">Crop</a>
      </span>
      &nbsp;
      <span class="button-wrapper" id="restore">
            <span class="l"> </span>
            <span class="r"> </span>
            <a class="button" href="javascript:void(0)">Restore</a>
      </span>
</div>
<div class="cleared"></div>
                       

</body>
</html>
